import { Link } from '@brillout/docpress'
import { PageHeader, UseScaffolder, UiFrameworkExtension } from '../../components'

<PageHeader>
Version history: [`CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)  
Examples: <Link href="/new">vike.dev/new</Link> and [`examples/`](https://github.com/vikejs/vike-solid/tree/main/examples)  
Source code: [GitHub > `vikejs/vike-solid`](https://github.com/vikejs/vike-solid)  
</PageHeader>

The <Link href="/extensions">Vike extension</Link> `vike-solid` is a full-fledged [Solid](https://solidjs.com) integration, with a high-level DX like a conventional framework such as Solid Start.

The documentation for using `vike-solid` can be found throughout this website (`vike.dev`).

> The guides, such as <Link href="/data-fetching" />, assume you're using Vike with <UiFrameworkExtension name noLink comma />. If you aren't then see the sections `Without vike-{react,vue,solid}` such as <Link href="/useData#without-vike-react-vue-solid" />.

> You can integrate Solid yourself instead of using `vike-solid`, see <Link href="/solid#custom-integration" />.


## Scaffold new `vike-solid` app

Use <Link href="/new">vike.dev/new</Link> for creating a new `vike-solid` app.


## Add `vike-solid` to existing Vike app

To add `vike-solid` to an existing Vike app: install the `vike-solid` npm package (e.g. `$ npm install vike-solid`) then extend your existing `+config.js` file (or create one) with `vike-solid`:

```ts
// /pages/+config.ts

import type { Config } from 'vike/types'
import vikeSolid from 'vike-solid/config'// [!code ++]

export default {
  // ...
  extends: [vikeSolid]// [!code ++]
} satisfies Config
```

You can then use <Link href="#under-the-hood">new settings introduced by `vike-solid`</Link>:

```ts
// /pages/+config.ts

import type { Config } from 'vike/types'
import vikeSolid from 'vike-solid/config'

export default {
  // ...

  // Setting to toggle SSR// [!code ++]
  ssr: false,// [!code ++]

  extends: [vikeSolid]
} satisfies Config
```

See also:
- <Link href="/add" />


## Under the hood

The `vike-solid` extension is only [around 1k lines of code](https://gist.github.com/brillout/e2134686d682e9a450e10e95f1ff570b).
It's simple, readable, and highly polished.

Reading the [source code of `vike-solid`](https://github.com/vikejs/vike-solid) is very much an option for understanding, debugging, and/or contributing.

> Contributions are welcome!

What `vike-solid` does is essentially this:
- Sets <Link href="/hooks">Vike hooks</Link> and <Link href="/settings">Vike settings</Link> on your behalf.
  > Most notably:
  > - <Link href="/onRenderHtml">`onRenderHtml()`</Link>
  >   (see [integration/onRenderHtml.tsx](https://github.com/vikejs/vike-solid/blob/main/packages/vike-solid/integration/onRenderHtml.tsx))
  > - <Link href="/onRenderClient">`onRenderClient()`</Link>
  >   (see [integration/onRenderClient.tsx](https://github.com/vikejs/vike-solid/blob/main/packages/vike-solid/integration/onRenderClient.tsx))
  > <p/> {/* MDX bug workaround */ }
- Creates new Vike settings and new Vike hooks. (By using <Link href="/meta" />.)
  > For example <Link href="/Layout">`<Layout>`</Link> and <Link href="/ssr">`ssr`</Link>.
- Implements Solid component hooks.
  > For example <Link href="/useData">`useData()`</Link> and <Link href="/usePageContext">`usePageContext()`</Link>.

It implements the following:

- <Link noBreadcrumb href="/useData" />
- <Link noBreadcrumb href="/usePageContext" />
- <Link noBreadcrumb href="/Layout" />
- <Link noBreadcrumb href="/ssr" />
- <Link noBreadcrumb href="/stream" />
- <Link noBreadcrumb href="/clientOnly" />
- <Link noBreadcrumb href="/onAfterRenderClient" />
- <Link noBreadcrumb href="/Head" />
- <Link noBreadcrumb href="/title" />
- <Link noBreadcrumb href="/description" />
- <Link noBreadcrumb href="/image" />
- <Link noBreadcrumb href="/favicon" />
- <Link noBreadcrumb href="/viewport" />
- <Link noBreadcrumb href="/lang" />
- <Link noBreadcrumb href="/htmlAttributes" />
- <Link noBreadcrumb href="/bodyAttributes" />

> For a better overview, see the following lists instead. (They also include all settings and hooks created by `vike-solid`.)
> - <Link href="/settings" />
> - <Link href="/hooks" />


## See also

- [GitHub > `vikejs/vike-solid`](https://github.com/vikejs/vike-solid)
- [GitHub > `vikejs/vike-solid` > `CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)
- [GitHub > `vikejs/vike-solid` > `examples/`](https://github.com/vikejs/vike-solid/tree/main/examples)
- <Link href="/solid" />
- <Link href="/vike-react" />
- <Link href="/vike-vue" />
